import React, { Component } from 'react';
import {HallStyled} from './StyledHall'

import { Toast , Modal } from 'antd-mobile'
import { Route, Switch, Redirect } from 'react-router-dom'


import UIButton from 'components/UIButton/UIButton'
import TitleBar from './component/Titlebar'
import Navigation from 'components/Navigation/Navigation'

import Whole from './childrenView/WholeTask'
import New from './childrenView/NewTask'
import Reputation from './childrenView/ReputationTask'
import Hign from './childrenView/HighTask'
import Simple from './childrenView/SimpleTask'

import Page404 from 'pages/page404/page404'



const barArr = [
  {
    title : "全部",
    routePath : "/index/hall/whole",
    component : Whole,
    tag : 0,
  },
  {
    title : "最新",
    routePath : "/index/hall/new",
    component : New,
    tag : 1,
  },
  {
    title : "信誉",
    routePath : "/index/hall/reputation",
    component : Reputation,
    tag : 2,
  },
  {
    title : "高价",
    routePath : "/index/hall/hign",
    component : Hign,
    tag : 3,
  },
  {
    title : "简单",
    routePath : "/index/hall/simple",
    component : Simple,
    tag : 4,
  }
  
]
let selTask = 0

class Hall extends Component {
  state = { 
    // selected: false,
   }
  render() {
    barArr.forEach((value,index)=>{
      // console.log(value,index)
      if(value.routePath === this.props.location.pathname){
        selTask  = value.tag
      }
    })
    return ( 
      <HallStyled>
        <Navigation 
        title = "大厅"
        ></Navigation>

        <TitleBar
        barArr = {barArr}
        taskIndex = {selTask}
        titleBorderWidth='0 0 5px 0'
        // titleWidth = '.5rem'
        ></TitleBar>

        <Switch>
          {
            barArr.map((value,index)=>(
              <Route key={index} path={value.routePath} component={value.component}></Route>
            ))
          }
          <Redirect from="/index/hall" to={barArr[selTask?selTask:0].routePath} exact></Redirect>
          <Route component={Page404}></Route>
        </Switch>



      </HallStyled> 
    );
  }
 
}
 
export default Hall;